<template>
 <div>
   <el-row>
     <el-col :span="1" style="margin: 0px 0px 0px 10% ">
       <img src="../img/order.png" width="40" height="40">
     </el-col>
     <h2 style="font-size: 30px;margin: 0px 0px">我的订单</h2>
   </el-row>
   <el-divider></el-divider>
   <div class="content" v-if="orders.length>0">
     <el-row style="margin: 20px 0px 0px 180px;">
       <el-col :span="21" >
         <el-card>
           <el-table ref="multipleTable" :data="orders" tooltip-effect="dark" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
             <el-table-column prop="goodname" label="商品名称">
             </el-table-column>
             <el-table-column prop="price" label="单价(元)" >
             </el-table-column>
             <el-table-column prop="count" label="数量" >
             </el-table-column>
             <el-table-column prop="subtotal" label="小计(元)" >
             </el-table-column>
           </el-table>
           <el-row>
             <el-col :span="5" :offset="13">
               <p style="font-size: 20px">收货人：{{ this.orders[0].username }}</p>
             </el-col>
             <el-col :span="5" >
               <p style="font-size: 20px">收货地址：{{ this.orders[0].useraddress }}</p>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="2" :offset="18">
               <p style="font-size: 30px">总价：</p>
             </el-col>
             <el-col :span="1">
               <p style="font-size: 30px;color: red">￥{{ this.$store.state.total }}</p>
             </el-col>
           </el-row>
         </el-card>
       </el-col>
     </el-row>
   </div>

   <div v-else class="cart-empty">
     <el-empty description=" ">
       <h2>您的订单是空的，快去购物吧</h2>
     </el-empty>
   </div>
 </div>

</template>

<script>
import ordersApi from "@/http/ordersApi";

export default {
name: "Order",
  created() {
  this.getList();
  },
  data(){
  return{
    orders:[]
  }
  },
  methods:{
    getList(){
      ordersApi.getListByPage().then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.orders = res.data.data.data
        }
      })
    },
  }
}
</script>

<style>
</style>